<!--  -->
<template>
    <div class=''>
        <cusTable border :loading="loading" :height="tableHeight" :columns="columns" :data="data" ref="selection"
            @on-selection-change="changeSelect" @on-select-all="changeSelectAll"
            @on-select-all-cancel="changeSelectAllCancel" :bottomClass="['cus-page',]">
            <template slot-scope="{ row }" slot="weightFlag">
                <div>{{ row.weightFlag == 0 ? '否' : '是' }}</div>
            </template>
        </cusTable>
        <div style="width: 100%;display: flex;justify-content: flex-end">
            <cus-page :data="pages" class="mt_20" @pageChange="selectFoodRaisePageApi()"></cus-page>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { selectFoodRaisePage, getProductCategoryList, downloadFoodRaiseExcelTemplate, foodRaiseImportExcel, batchDeleteFoodRaise } from '@/api/organ/dishesModule';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
        form: {
            type: Object,
        },
        height: {
            type: Number,
        }
    },
    data() {
        //这里存放数据
        return {
            selectMaterialId: [], //勾选Id
            selectStatu: false, //全选状态
            selectData: [], // 选中数据
            data: [],
            loading: false,
            tableHeight: 0,
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '序号',
                    width: 70,
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '食材名称',
                    key: 'foodName',
                    align: 'center',
                },
                {
                    title: '商品种类',
                    key: 'productCategory',
                    align: 'center',
                },
                {
                    title: '供应商',
                    key: 'supplyName',
                    align: 'center',
                },
                {
                    title: '区域',
                    key: 'kitchenAreaName',
                    align: 'center',
                },
                {
                    title: '计量单位',
                    key: 'specification',
                    align: 'center'
                },
                {
                    title: '单位重量/kg',
                    key: 'unitWeight',
                    align: 'center'
                },
                {
                    title: '价格',
                    key: 'packagingPrice',
                    align: 'center',
                    width: 120
                },
                {
                    title: '称重入库',
                    slot: 'weightFlag',
                    align: 'center'
                },
                {
                    title: '品牌',
                    key: 'brand',
                    align: 'center'
                },
                {
                    title: '商品条形码',
                    key: 'snCode',
                    align: 'center'
                },
                {
                    title: '生效日期',
                    key: 'effectiveDate',
                    align: 'center'
                },
                // {
                //     title: '操作',
                //     width: 150,
                //     fixed: 'right',
                //     slot: 'operation',
                //     align: 'center'
                // },
            ],
            pages: {
                page: 1,
                pageSize: 10,
                pageTotal: 0
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        window.addEventListener("resize", this.getTableHeight);
        this.getTableHeight();
        // this.onInit()
    },
    //方法集合
    methods: {
        onInit() {
            this.selectFoodRaisePageApi()
        },
        getTableHeight() {
            this.tableHeight = window.innerHeight - 373;
        },
        // 选中全选表格选项变化
        changeSelectAll(e) {
            this.selectStatu = true
        },
        // 取消选中全选
        changeSelectAllCancel(e) {
            this.selectStatu = false
        },
        // 表格选项变化
        changeSelect(e) {
            console.log(e)
            this.$emit("changeSelect", e);
            this.selectData = e
            if (this.selectData.length == 0) {
                this.selectStatu = false
                return
            }
            let state = this.selectData.every((item) => {
                return (
                    this.selectMaterialId.includes(item.materialId) &&
                    this.selectData.length == this.selectMaterialId.length
                )
            })
            // console.log(state);
            this.selectStatu = state
        },
        // // 表格选项变化
        // changeSelect(e) {
        //     this.selectData = e;
        // },
        handleSelectAll(status) {
            this.selectStatu = !this.selectStatu
            this.$refs.selection.tableDom(status);
        },
        onDelete() {
            if (!this.selectData.length) {
                this.$Message.warning('请先选择要删除的数据内容.')
            } else {
                this.$Modal.confirm({
                    title: '删除确认',
                    content: `是否确认删除选中数据内容？`,
                    onOk: () => {
                        this.batchDeleteFoodRaiseApi();
                    }
                });
            }
        },
        // 获取供应信息列表
        selectFoodRaisePageApi() {
            this.loading = true;
            this.selectData = [];
            this.$parent.selectData = [];
            return new Promise(resolve => {
                selectFoodRaisePage({
                    foodName: this.form.foodName, // 食材名称
                    foodTypeName: this.form.foodTypeName, // 季节
                    supplyName: this.form.supplyName,
                    kitchenArea: this.form.kitchenArea, //区域
                    current: this.pages.page,
                    size: this.pages.pageSize
                }).then(res => {
                    this.loading = false;
                    if (res.code === 1) {
                        this.data = res.data.records;
                        this.selectMaterialId = []
                        this.data.forEach((item) => {
                            this.selectMaterialId.push(item.materialId)
                        })
                        console.log(this.selectMaterialId)
                        this.pages.pageTotal = res.data.total;
                        resolve();
                    }
                })
            })
        },
        // 批量删除供应信息
        batchDeleteFoodRaiseApi() {
            return new Promise(resolve => {
                let foodRaiseIdList = this.selectData.map(item => item.foodRaiseId)
                batchDeleteFoodRaise({
                    foodRaiseIdList: foodRaiseIdList
                }).then(res => {
                    if (res.code === 1) {
                        this.$Message.success("供应信息删除成功.")
                        this.selectData = []
                        if(this.data.length == 1 && this.pages.page != 1 ) this.pages.page--
                        this.onInit();
                        resolve();
                    }
                })
            })
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },

}
</script>
<style scoped></style>